<template>
  <div class='container'>
    <el-card class="questions_card">

      <div class="header">
        <span style="color:rgba(255, 0, 0, .5);font-size:12px;">说明：目前支持学科和关键字条件筛选
        </span>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          @click="skip2"
        >新建试题</el-button>
      </div>

      <el-form :data="form">
        <!-- 学科 -->
        <el-form-item>
          <template #label>
            &emsp;&emsp;学科
          </template>
          <el-select
            v-model="form.subject"
            placeholder="请选择"
          >
            <el-option
              :label="subjectList.length > 1 ? item : '无结果'"
              v-for="(item, index) in subjectList"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 二级目录 -->
        <el-form-item label="二级目录">
          <el-select
            v-model="form.catalog"
            placeholder="请选择"
          >
            <el-option
              :label="tagsList.length > 1 ? item : '无结果'"
              v-for="(item, index) in catalogList"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 标题 -->
        <el-form-item>
          <template #label>
            &emsp;&emsp;标签
          </template>
          <el-select
            v-model="form.tags"
            placeholder="请选择"
          >
            <el-option
              :label="tagsList.length > 1 ? item : '无结果'"
              v-for="(item, index) in tagsList"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 关键字 -->
        <el-form-item>
          <template #label>
            &emsp;关键字
          </template>
          <el-input
            v-model="form.keyword"
            placeholder="根据题干搜索"
          />
        </el-form-item>

        <!-- 试题类型 -->
        <el-form-item label="试题类型">
          <el-select
            v-model="form.questionType"
            placeholder="请选择"
          >
            <el-option
              :label="questionTypeList.length > 1 ? questionType(item) : '无结果'"
              v-for="(item, index) in questionTypeList"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 难度 -->
        <el-form-item>
          <template #label>
            &emsp;&emsp;难度
          </template>
          <el-select
            v-model="form.difficulty"
            placeholder="请选择"
          >
            <el-option
              :label="difficultyList.length > 1 ? difficulty(item) : '无结果'"
              v-for="(item, index) in difficultyList"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 方向 -->
        <el-form-item>
          <template #label>
            &emsp;&emsp;方向
          </template>
          <el-select
            v-model="form.direction"
            placeholder="请选择"
          >
            <el-option
              :label="directionList.length > 1 ? item : '无结果'"
              v-for="(item, index) in directionList"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 录入人 -->
        <el-form-item>
          <template #label>
            &emsp;录入人
          </template>
          <el-select
            v-model="form.creator"
            placeholder="请选择"
          >
            <el-option
              :label="creatorList.length > 1 ? item : '无结果'"
              v-for="(item, index) in creatorList"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 题目标注 -->
        <el-form-item label="题目备注">
          <el-input v-model="form.remarks" />
        </el-form-item>

        <!-- 企业简称 -->
        <el-form-item label="企业简称">
          <el-input v-model="form.shortName" />
        </el-form-item>

        <!-- 城市 -->
        <el-form-item class="city">
          <template #label>
            &emsp;&emsp;城市
          </template>
          <el-select
            v-model="form.city"
            placeholder="请选择"
            @change="select"
          >
            <el-option
              :label="provinces.length > 1 ? item : '无结果'"
              v-for="(item, index) in provinces"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.province"
            placeholder="请选择"
          >
            <el-option
              :label="site.length > 1 ? item : '无结果'"
              v-for="(item, index) in site"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          class="box"
          style="padding-left:120px;padding-top:5px;"
        >
            <el-button
              size="small"
              @click="resetField"
            >取消</el-button>
            <el-button
              size="small"
              type="primary"
              @click="search"
            >确认</el-button>
        </el-form-item>
      </el-form>

      <el-alert
        :title="`一共${counts}条数据`"
        type="info"
        show-icon
        :closable="false"
      />

      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="Loading"
      >
        <el-table-column
          prop="number"
          label="试题编号"
        >
        </el-table-column>

        <el-table-column
          prop="subject"
          label="学科"
        >
        </el-table-column>

        <el-table-column
          prop="catalog"
          label="目录"
        >
        </el-table-column>

        <el-table-column
          prop="questionType"
          label="题型"
        >
          <template v-slot="{row}">
            {{questionType(row.questionType)}}
          </template>
        </el-table-column>

        <el-table-column
          label="题干"
          width="300"
        >
          <template v-slot="{row}">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>

        <el-table-column
          prop="addDate"
          label="录入时间"
        >
          <template v-slot="{row}">
            {{Format(row.addDate)}}
          </template>
        </el-table-column>

        <el-table-column label="难度">
          <template v-slot="{row}">
            {{difficulty(row.difficulty)}}
          </template>
        </el-table-column>

        <el-table-column
          prop="creator"
          label="录入人"
        >
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="180"
        >
          <template v-slot="{row}">
            <el-button
              type="primary"
              plain
              size="mini"
              icon="el-icon-view"
              circle
              @click="show(row)"
            />
            <el-button
              type="success"
              plain
              size="mini"
              icon="el-icon-edit"
              circle
              @click="skip(row.id)"
            />
            <el-button
              type="danger"
              plain
              size="mini"
              icon="el-icon-delete"
              circle
              @click="del(row)"
            />
            <el-button
              type="warning"
              plain
              size="mini"
              icon="el-icon-check"
              circle
              @click="collect(row)"
            />
          </template>
        </el-table-column>
      </el-table>

      <h3 style="text-align: center;">{{nbsp}}</h3>

      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="counts"
        >
        </el-pagination>
      </div>

      <Preview
        :isShowDialog.sync="visibleDialog"
        v-if="visibleDialog"
        :currentId="obj"
      />
    </el-card>
  </div>
</template>

<script>

import Preview from '../components/questions-preview.vue'
import { list, choice, choiceAdd, remove } from '@/api/hmmm/questions'
import { difficulty, questionType } from '@/api/hmmm/constants'
import { parseTime } from '@/filters/index.js'
import { provinces, citys } from '@/api/hmmm/citys'
import { MessageBox } from 'element-ui'

export default {
  components: {
    Preview
  },
  data () {
    return {
      Loading: false,
      form: {
        /* subject: '', // 学科
        catalog: '', // 目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creator: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 企业所在城市
        province: '' // 企业所在省份 */
      },
      // 搜索筛选数据
      subjectList: [],
      catalogList: [],
      tagsList: [],
      questionTypeList: [],
      difficultyList: [],
      directionList: [],
      creatorList: [],
      provinces: provinces(), // 筛选城市
      site: '', // 筛选区域
      tableData: [{
        number: '试题编号', // 试题编号
        subject: '学科', // 学科
        catalog: '目录', // 目录
        questionType: '题型', // 题型
        question: '题干', // 题干
        difficulty: '难度', // 难度
        creator: '录入人', // 录入人
        addDate: Date.now() // 录入时间
      }],
      currentData: {},
      page: 1,
      pagesize: 5,
      counts: 0,
      visibleDialog: false,
      nbsp: ''
    }
  },
  methods: {
    handleSizeChange (val) {
      this.pagesize = val
      // console.log(`每页 ${val} 条`)
      this.getList()
    },
    handleCurrentChange (val) {
      this.page = val
      // console.log(`当前页: ${val}`)
      this.getList()
    },
    show (row) {
      this.currentData = row.id
      this.visibleDialog = true
    },
    async getList () {
      this.Loading = true
      const obj = { ...this.form }
      const { data } = await list({ page: this.page, pagesize: this.pagesize, ...obj })
      if (!data.items) { this.nbsp = '暂无数据' } else { this.nbsp = '' }
      this.subjectList = []
      let lists = data.items.map(item => {
        if (!this.subjectList.includes(item.subject)) { this.subjectList.push(item.subject) }
        if (!this.catalogList.includes(item.catalog)) { this.catalogList.push(item.catalog) }
        if (!this.tagsList.includes(item.tags)) { this.tagsList.push(item.tags) }
        if (!this.questionTypeList.includes(item.questionType)) { this.questionTypeList.push(item.questionType) }
        if (!this.difficultyList.includes(item.difficulty)) { this.difficultyList.push(item.difficulty) }
        if (!this.directionList.includes(item.direction)) { this.directionList.push(item.direction) }
        if (!this.creatorList.includes(item.creator)) { this.creatorList.push(item.creator) }
        return item
      })
      lists = lists.filter(item => {
        if (this.form.subject) {
          if (item.subject === this.form.subject) {
            if (this.form.catalog) {
              if (item.catalog === this.form.catalog) {
                return item
              }
            } else {
              return item
            }
          }
        } else {
          return item
        }
      })
      this.tableData = lists
      this.counts = data.counts
      this.Loading = false
      this.$message.success('列表已更新')
    },
    Format (time) {
      return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
    },
    difficulty (str) {
      if (!str) return
      // return difficulty.filter(item => item.value === +str)[0].label
      let data = ''
      difficulty.forEach(item => {
        if (item.value === +str) {
          data = item.label
        }
      })
      return data
    },
    questionType (str) {
      if (!str) return
      // return questionType.filter(item => item.value === +str)[0].label
      let data = ''
      questionType.forEach(item => {
        if (item.value === +str) {
          data = item.label
        }
      })
      return data
    },
    del (data) {
      MessageBox.confirm('此操作将删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data)
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除取消'
        })
      })
    },
    collect (data) {
      MessageBox.confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choiceAdd({ id: data.id, choiceState: 1 })
        this.getList()
        this.$message({
          type: 'success',
          message: '加入成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消加入'
        })
      })
    },
    async choice () {
      const res = await choice(this.form)
      console.log(res)
    },
    resetField () {
      this.form = {}
    },
    select () {
      this.site = citys(this.form.city)
    },
    search () {
      this.getList()
    },
    skip (data) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: data
        }
      })
      if (data === '') return this.$router.push('/questions/new')
    },
    skip2 () {
      this.$router.push('/questions/new')
    }
  },
  computed: {
    obj () {
      return this.currentData
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.questions_card {
  margin: 10px 10px 15px;
  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  .el-form-item {
    display: inline-block;
    margin: 0;
    width: 25%;
    margin-bottom: 15px;
    .el-select,
    .el-input {
      width: 70%;
    }
    &.city {
      .el-select {
        width: 33%;
        &:nth-child(2) {
          margin-left: 4%;
        }
      }
    }
  }
  .el-alert {
    margin-bottom: 15px;
  }
  .pagination {
    margin-top: 15px;
    text-align: right;
  }
  ::v-deep {
    .el-pagination__jump {
      margin-left: 0;
    }
  }
}
</style>
